<template>
  <el-container class="container">
    <product-type ref="comType" @clickType="changeType" @updateTypes="updateTypes" />

    <product-list :typeId='selectedTypeId' :product-types="types" />

  </el-container>
</template>

<script>
import ProductType from './product-type'
import ProductList from './product-list'
export default {
  name: 'productIndex',
  components: {
    ProductType,
    ProductList
  },
  data() {
    return {
      selectedTypeId: 0,
      types: []
    }
  },
  methods: {
    changeType(type) {
      this.selectedTypeId = type ? type.id : 0
      
    },
    updateTypes(e) {
      this.types = e 
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  min-height: calc(100vh - 84px);
  padding: 20px;
}
</style>
